<template>
	<view class="contentPage">
		<view class="searchItem df">
			<view class="searchBox df">
				<text class="iconfont icon-sousuo" style="font-size: 40rpx;"></text>
				<input class="searchInput" type="text" v-model="inputValue" @input="changeValue" />
			</view>
			<view class="cancelTxt" @click="cancelValue">取消</view>

		</view>
		<!-- 搜索历史 -->
		<view class="historyBox">
			<view class="historyTop df">
				<view class="title">搜索历史</view>
				<view class="clear" @click="cancelList">清空</view>
			</view>
			<view class="historyList" v-if="historyArr.length > 0">
				<view class="cityItem" v-for="(item,index) in historyArr" :key="index" @click="activeHistoryItem(item)">
					{{item.name}}
				</view>
			</view>
			<view class="noHistory df" v-else>暂无历史</view>
		</view>

		<view class="title">主要城市列表</view>
		<view class="mainCityContent">
			<view :class="activeIndex == index ? 'activeCityItem':'cityItem'" @click="activeItem(item,index)"
				v-for="(item,index) in hotCityArr" :key="index">
				{{item.name}}
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="resultPop" v-show="searchCityShow">
			<scroll-view class="resultCity" scroll-y="true">
				<view class="resultItem df" v-for="(item1,index1) in reultArr" :key="index1+item1.id"
					@click="chooseCity(item1)">
					<view>{{item1.name}}</view> - <view>{{item1.adm2}}</view> - <view>{{item1.adm1}}</view> - <view>
						{{item1.country}}
					</view>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, toRef, onBeforeMount, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app';
	import request from '@/pages/utils/https.js';
	const inputValue = ref('')
	const activeIndex = ref(-1)
	const historyArr = reactive([])
	const hotCityArr = reactive([])
	const searchCityShow = ref<boolean>(false)
	const reultArr = reactive([])
	const cancelList = () => {
		historyArr.length = 0;
		uni.removeStorageSync('historyArr');
	}
	const activeItem = (item, index) => {
		activeIndex.value = index;
		uni.navigateTo({
			url: `/pages/index/index?info=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	// 监听输入
	const changeValue = (e) => {
		if (e.detail.value) {
			searchCityInfo(e.detail.value);
		} else {
			cancelValue();
		}
	}
	// 点击历史搜索城市
	const activeHistoryItem = (item) => {
		uni.navigateTo({
			url: `/pages/index/index?info=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	// 搜索城市
	const searchCityInfo = async (value) => {
		let url = `https://geoapi.qweather.com/v2/city/lookup?location=${value}&range=cn`
		try {
			const data = await request({
				url: url,
				method: 'GET'
			})
			if (data) {
				searchCityShow.value = true;
				reultArr.splice(0, reultArr.length, ...data.location);
			}
		} catch {

		}
	}
	// 选中城市
	const chooseCity = (item1) => {
		const isExist = historyArr.some(item => item.id === item1.id);
		if (!isExist) {
			historyArr.unshift(item1);
		}
		// 存储到本地
		uni.setStorageSync('historyArr', JSON.stringify(historyArr))
		cancelValue();
		// 携带城市信息
		uni.navigateTo({
			url: `/pages/index/index?info=${encodeURIComponent(JSON.stringify(item1))}`
		})
	}
	const cancelValue = () => {
		inputValue.value = '';
		searchCityShow.value = false;
	}
	// 获取全国热门城市
	const getHotCity = async () => {
		try {
			const data = await request({
				url: `https://geoapi.qweather.com/v2/city/top?number=20&range=cn`,
				method: 'GET'
			});
			hotCityArr.splice(0, hotCityArr.length, ...data.topCityList);


		} catch (error) {
			console.error('错误:', error);
		}
	}
	// 获取本地历史数组
	const getHistoryArr = async () => {
		let arr = []
		//获取本地历史城市数组
		try {
			const value = uni.getStorageSync('historyArr');
			if (value) {
				arr = JSON.parse(value)
				historyArr.splice(0, historyArr.length, ...arr);
			}
		} catch (e) {
			// error
			historyArr.splice(0, historyArr.length, ...arr);
		}
	}
	onShow(() => {
		getHistoryArr()
	})
	onMounted(() => {

	})
	onBeforeMount(() => {
		getHotCity();
	})
</script>

<style lang="scss" scoped>
	.contentPage {
		padding: 24rpx;
		background-color: #f7f7f7;
		min-height: 100vh;

		.searchItem {
			width: 100%;
			align-items: center;
			position: relative;

			.searchBox {
				flex: 1;
				padding: 24rpx;
				background-color: #E8E8E8;
				border-radius: 50rpx;
				align-items: center;

				.searchInput {
					width: 100%;
					margin-left: 20rpx;
				}
			}

			.cancelTxt {
				color: #0180FF;
				margin-left: 30rpx;
			}



		}

		.historyBox {
			width: 100%;
			margin-top: 30rpx;

			.historyTop {
				align-items: center;
				justify-content: space-between;
				color: #A8A8A8;
			}

			.historyList {
				padding: 30rpx 0;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				/* 3列等宽 */
				grid-template-rows: repeat(1, 80rpx);
				/* 3行固定高度 */
				gap: 20rpx;
				/* 行间距+列间距 */
				height: auto !important;
			}

			.noHistory {
				align-content: center;
				justify-content: center;
				color: #A8A8A8;
			}
		}

		.cityItem {
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #333333;
			background-color: white;
			border-radius: 20rpx;
		}

		.activeCityItem {
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #ffffff;
			background-color: white;
			border-radius: 20rpx;
			background-color: #0180FF;
		}

		.title {
			color: #A8A8A8;
		}

		.mainCityContent {
			padding: 30rpx 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 3列等宽 */
			grid-template-rows: repeat(3, 80rpx);
			/* 3行固定高度 */
			gap: 20rpx;
			/* 行间距+列间距 */
		}

		.resultPop {
			background-color: #f7f7f7;
			padding: 24rpx;
			position: absolute;
			z-index: 2;
			bottom: 0rpx;
			left: 0;
			width: 100%;
			min-height: 90vh;
			box-sizing: border-box;

			.resultCity {
				background-color: #ffffff;
				border-radius: 20rpx;
				padding: 24rpx;
				box-sizing: border-box;
				height: calc(100vh - 160px);
			}

			.resultItem {
				padding: 24rpx;
				margin-bottom: 24rpx;

			}
		}

	}
</style>